<template>
  <div>
    <el-table
      :data="props.tableData"
      :header-cell-style="headerCellStyle"
      style="width: 100%"
    >
      <el-table-column prop="id" label="序号" width="60" fixed />
      <el-table-column prop="source" label="来源" />
      <el-table-column prop="taskName" label="任务名称" />
      <el-table-column prop="taskArea" label="任务区域" />
      <el-table-column prop="executeUser" label="任务创建人" />
      <el-table-column prop="executeUser" label="建议实施时间" />
      <el-table-column prop="executeUser" label="实际完成时间" />
      <el-table-column prop="executeUser" label="提交人" width="80" />
      <el-table-column prop="taskStatus" label="任务状态" width="100">
        <template #default="{ row }">
          <div class="status-container">
            <div
              class="circle-status"
              :class="getStatusClass(row.taskStatus)"
            ></div>
            <span>{{ getStatusLabel(row.taskStatus) }}</span>
          </div>
        </template>
      </el-table-column>
      <!-- 操作列 -->
      <el-table-column prop="operator" label="操作" width="280" fixed="right">
        <template #default="{ row }">
          <el-button type="primary" size="small" text @click="handleDetail(row)"
            >内容详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-swapper">
      <el-pagination
        background
        layout="sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
        :page-size="pageInfo.pageSize"
        :current-page="pageInfo.currentPage"
        :page-sizes="[5, 10, 15, 20]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-drawer v-model="drawer" size="50%" title="内容详情">
      <DetailPage />
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from "vue";
import DetailPage from "../detailPage.vue";

const drawer = ref(false);
interface Props {
  tableData: any[];
}

const props = defineProps<Props>();

// 监听 tabKey 变化，触发数据更新
watch(
  () => props.tableData,
  (newKey) => {
    // 当 tabKey 变化时，重新请求对应数据
    console.log(newKey, "newKEY");
  },
  {
    immediate: true, // 初始加载时立即执行一次（关键：确保初始 tab 有数据）
  }
);
const headerCellStyle = () => {
  return {
    backgroundColor: "#f8f8f8", // 设置背景色
    fontWeight: "bold",
  };
};
const regionOptions = [
  { label: "已完成", value: "1" },
  { label: "未完成", value: "0" },
];

// 根据状态值获取对应的中文名称
const getStatusLabel = (statusValue: string) => {
  const option = regionOptions.find((option) => option.value === statusValue);
  return option ? option.label : statusValue;
};

// 根据状态值获取对应的样式类名
const getStatusClass = (statusValue: string) => {
  if (statusValue === "1") {
    return "status-completed";
  } else {
    return "status-not-completed";
  }
};

const pageInfo = reactive({
  total: 100,
  currentPage: 1,
  pageSize: 10,
});

function handleDetail(row: any) {
  drawer.value = true;
  // router.push("/taskManagement/data/dataDetail");
}
function handleSizeChange() {}
function handleCurrentChange() {}
</script>

<style lang="scss" scoped>
.pagination-swapper {
  display: flex;
  justify-content: end;
  margin-top: 20px;
}

// 任务状态样式
.status-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.circle-status {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.status-completed {
  background-color: #67c23a; // 已完成 - 绿色
}

.status-not-completed {
  background-color: red; // 未完成 - 灰色
}
</style>
